custom js

custom js 是繼 custom css 過場動畫後要分享的文章，之前分享的文章都是用內建函式庫來處理過場動畫，昨天的［custom css] 是客製化 css 來完成過場動畫，既然 css 都可以客製化了，那今天來分享客製化js。

本文同步放置於此

custom js 是什麼

顧名思義客製化js是自定義想要的javascript方法，在過場動畫中則是透過改變javascript來呈現過場動畫，當然這麼描述很抽象，接下來看看實作的例子。

custom js 能做什麼

下面用一個打字效果的過場動畫，也許客製化css可以完成這個效果，但是客製化js更容易完成，請大家看一下下面的例子。

<script>
	let visible = false;

	function typewriter(node, { speed = 50 }) {
	const valid = (
		node.childNodes.length === 1 &&
		node.childNodes[0].nodeType === 3
	);

	if (!valid) {
		throw new Error(`This transition only works on elements with a single text node child`);
	}

	const text = node.textContent;
	const duration = text.length * speed;

	return {
		duration,
		tick: t => {
			const i = ~~(text.length * t);
			node.textContent = text.slice(0, i);
		}
	};
	}
</script>

<label>
	<input type="checkbox" bind:checked={visible}>
	visible
</label>

{#if visible}
	<p in:typewriter>
		The quick brown fox jumps over the lazy dog
	</p>
{/if}

上面的範例主要是藉由tick這個每段時間的callback來不斷使用javascript，來更新文字長度藉此完成透過客製化js的過場動畫。

小結

今天藉由客製化js來將過場動畫告一段落，明天要寫下鐵人比賽第三十天的文章，敬請期待。